<template>
  <div class="carpcontain">
    <div class="carpaction">
      <div style="display: flex;align-items: center">
        <div>
          <el-dropdown class="kmfl">
            <span class="el-dropdown-link">科目分类<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="selectkm0">全部</el-dropdown-item>
                <el-dropdown-item @click="selectkm1">科目二</el-dropdown-item>
                <el-dropdown-item @click="selectkm2">科目三</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="color: #0083ff;">负责场地选择后尽量不要更换，如需更换，请及时通知自己的学员</div>
      </div>
      <div style="margin-right: 5px;font-weight: 600">总场地数：{{ num }}</div>
    </div>
    <div class="carpcard">
      <el-empty description="暂无考试信息" v-show="isempty"/>
      <div v-for="(item,index) in carpractiseList" :key="index">
        <div class="_carpcard">
          <div class="card-info">
            <div class="card-avatar">{{ item.subject }}</div>
            <div class="card-title">
              <div v-if="!Loginer.place&&!Loginer.subject">
                状态：
                <span style="padding: 1px 4px;font-weight: 600">可选择</span>
              </div>
              <div v-else-if="Loginer.place === item.place&&Loginer.subject === item.subject">
                状态：
                <span style="padding: 1px 4px;font-weight: 600">已选择</span>
              </div>
              <div v-else>
                状态：
                <span style="padding: 1px 4px;font-weight: 600;background-color: #00a80c">可更换</span>
              </div>
              <div>地点：{{item.place}}</div>
              <div><el-divider border-style="double" /></div>
            </div>
          </div>
          <ul class="card-social">
            <li class="card-social__item"><button class="carpbut" @click="changepractise(item.place,item.subject)">选择</button></li>
          </ul>
        </div>
      </div>
      <div style="position: absolute;bottom: 0;height: 40px" >
        <el-pagination
            v-model:currentPage="currentPage1"
            :page-size="pagesize"
            background
            layout="total, prev, pager, next"
            :total="num"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { ArrowDown } from '@element-plus/icons-vue'
import {getPlaceByPlace, getPractiseBythree, getPractiseBytow} from "@/api/practise";
import {useStore} from "vuex";
import {getTeacherById, UpdateTeacher} from "@/api/teacher";
import {ElMessage} from "element-plus";
const store = useStore()

//初始化
const queryvalue = ref('')
const carpractiseList = ref({})
const isempty = ref(false)

const currentPage1 = ref(1)
const pagesize = ref(6)
const num = ref(0)
const pagetype = ref(0)

const Loginer = ref({})

//个人信息
const GetLoginer = async () => {
  await getTeacherById(store.getters.Id).then(res=>{
    Loginer.value = res.data
  })
}
GetLoginer()


//全部
const selectkm0 = async () =>{
  currentPage1.value = 1
  pagesize.value = 12
  await getPractiseBytow({pageNum:currentPage1.value,pageSize:pagesize.value}).then( async res=>{
     await getPractiseBythree({pageNum:currentPage1.value,pageSize:pagesize.value}).then(re=>{
        for (var i=0;i<re.data.list.length;i++){
          res.data.list.push(re.data.list[i])
        }
        carpractiseList.value = res.data.list
        num.value = carpractiseList.value.length
      })
  })
  pagetype.value = 0
}
selectkm0()

//科目筛选
const selectkm1 = async () =>{
  currentPage1.value = 1
  pagesize.value = 6
  await getPractiseBytow({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      carpractiseList.value = res.data.list
      num.value = res.data.total
      isempty.value = false
    }else {
      isempty.value = true
    }
  })
  pagetype.value = 1
}
const selectkm2 = async () =>{
  currentPage1.value = 1
  pagesize.value = 6
  await getPractiseBythree({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      carpractiseList.value = res.data.list
      num.value = res.data.total
      isempty.value = false
    }else {
      isempty.value = true
    }
  })
  pagetype.value = 2
}


//选择场地
const changepractise = async (place,subject) =>{
  await UpdateTeacher({id:store.getters.Id,place:place,subject:subject}).then(res=>{
    if (res.code === 20031){
      ElMessage({
        message: '选择成功',
        type: 'success',
      })
    }else {
      ElMessage({
        message: '获取信息失败',
        type: 'error',
      })
    }
    GetLoginer()
  })
}

//分页器
const handleCurrentChange = async () =>{
  if (pagetype.value === 0){
    await getPractiseBytow({pageNum:currentPage1.value,pageSize:pagesize.value}).then( async res=>{
      await getPractiseBythree({pageNum:currentPage1.value,pageSize:pagesize.value}).then(re=>{
        for (var i=0;i<re.data.list.length;i++){
          res.data.list.push(re.data.list[i])
        }
        carpractiseList.value = res.data.list
        num.value = carpractiseList.value.length
      })
    })
  }else if (pagetype.value === 1){
    await getPractiseBytow({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
      if (res.code === 20041){
        carpractiseList.value = res.data.list
        num.value = res.data.total
        isempty.value = false
      }else {
        isempty.value = true
      }
    })
  }else if (pagetype.value === 2){
    await getPractiseBythree({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
      if (res.code === 20041){
        carpractiseList.value = res.data.list
        num.value = res.data.total
        isempty.value = false
      }else {
        isempty.value = true
      }
    })
  }else {
    await getPlaceByPlace({pageNum:currentPage1.value,pageSize:pagesize.value,place:queryvalue.value}).then(res=>{
      if (res.code === 20041){
        carpractiseList.value = res.data.list
        num.value = res.data.total
        isempty.value = false
      }else {
        isempty.value = true
      }
    })
  }
}
</script>

<style scoped>
/**{*/
/*  border: 1px solid blue;*/
/*}*/
.carpcontain{
  flex: 1;
  margin: 0;
  padding: 10px 10%;
  height: auto;
  overflow: scroll;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  background-color: white;
}
.carpaction{
  height: 70px;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.carpcard{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  border: 1px solid #e4e7ed;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);

}
.carpcard>div{
  width: 20vw;
  min-width: 330px;
  height: 200px;
  margin: 10px;
  box-sizing: border-box;
}
.kmfl{
  font-size: 17px;
  font-family: 方正姚体,serif;
  margin: 10px;
  color: #1f2d3d;
  transition: color .2s ease;
}
.kmfl:hover{
  color: #4da9ff;
}

/* From uiverse.io by @alexruix */
._carpcard{
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  background-color: #ffffff;
  padding: 10px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .2s ease;
}

.card-info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: all .2s ease;
}

/*Image*/
.card-avatar {
  --size: 60px;
  background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transition: transform .2s ease;
  margin-bottom: 1rem;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

}


/*Card footer*/
.card-social {
  transform: translateY(200%);
  display: flex;
  justify-content: space-around;
  width: 100%;
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.card-social__item {
  list-style: none;
}

.card-social__item svg {
  display: block;
  height: 18px;
  width: 18px;
  fill: #515F65;
  cursor: pointer;
  transition: fill 0.2s ease ,transform 0.2s ease;
}

/*Text*/
.card-title {
  color: #333;
  flex: 1;
  font-weight: 400;
  line-height: 2rem;
  /*border: 1px solid blue;*/
}
.card-title span{
  color: #ffffff;
  border: 1px solid #cacaff;
  background-color: #73b7ff;
  border-radius: 2px;
  padding: 2px;
}


/*Hover*/
._carpcard:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}

._carpcard:hover .card-info {
  height: 80%;
  transform: translateY(-5%);
}

._carpcard:hover .card-social {
  transform: translateY(0);
  opacity: 1;
}

.card-social__item svg:hover {
  fill: #232323;
  transform: scale(1.1);
}

.card-avatar:hover {
  transform: scale(1.1);
}

/* From uiverse.io by @arieshiphop */
.carpbut{
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  background: dodgerblue;
  color: white;
  border-radius: 4px;
}

.carpbut:hover {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

.carpbut:active {
  transform: translate(0em, 0.2em);
}
</style>